<template>

  <el-container style="height: 100vh; border: 1px solid #eee">

    <el-aside :width="aside_with">
      <Aside :isCollapse="isCollapse"></Aside>
    </el-aside>

    <el-container >
      <el-header style="text-align: right; font-size: 12px;border-bottom: darkgray 1px;background-color: #409EFF">
        <Header @doCollapse="doCollapse" :icon="icon"></Header>
      </el-header>

      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>

</template>

<style scoped>
.el-header {
  //background-color: #67C23A;
  color: #333;
  line-height: 60px;
}
</style>

<script>
import Aside from "@/components/Aside.vue";
import Header from "@/components/Header.vue";

export default {
  name:"Index",
  components:{ Header, Aside},
  data(){
    return {
      isCollapse:false,
      aside_with:"200px",
      icon:"el-icon-s-fold"
    }
  },

  methods:{
    doCollapse(){
      this.isCollapse=!this.isCollapse
      if(!this.isCollapse){ //展开
        this.aside_with="200px"
        this.icon="el-icon-s-fold"
      }else{ //收起
        this.aside_with="55px"
        this.icon="el-icon-s-unfold"
      }
    }
  }
};
</script>